<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <script type="text/javascript " src="static/js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
    <link href="static/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
    <link href="static/css/css-1.css">
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

</head>

<body style="background-color: #eeeeee">
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">BBS</a>
        </div>
        <div class="col-lg-6">
            <ul class="nav navbar-nav">
                <li class="active"><a href="main.jsp">首页</a></li>
                <li><a>问答</a></li>
                <li><a href="help.jsp">帮助中心</a></li>
                <li><a href="mine.jsp">我的</a></li>
                <li>
                    <form class="form-inline" style="margin-top:8px ">
                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </li>
            </ul>

        </div>

        <div class="col-lg-2 col-lg-offset-2">
            <ul class="nav navbar-nav">
                <li><a  href="javascript:void(0)" class="logoutBtn">注销</a></li>
            </ul>
        </div>
    </div>

</nav>


<div class="container" style=" padding:20px;background-color: #ffffff;width: 80%">

    <div class="row">
        <div class="col-lg-12 ">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 发现 </h2>
            <hr>
        </div>
        <div id="topics-top">
            <c:forEach items="${topicUserMapTop}" var="topicUser">
                <div class="media-left">
                    <a href="#">
                        <img width="60px" class="media-object img-circle picset" src="${topicUser.value.profilePhoto}">
                    </a>
                </div>
                <div class="media-body ">
                    <div style="color:#C9CDD4; margin-bottom: 10px">
                        <span >${topicUser.value.name}</span>
                        <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
                        <span>发表时间： ${topicUser.key.createTime}</span>
                        <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle" style="vertical-align: auto">${topicUser.key.browseCount}</span>
                        <span style="margin-left: 20px;" class="glyphicon glyphicon-comment">${topicUser.key.commentCount}</span>
                        <span class=" glyphicon glyphicon-thumbs-up" style="margin-left: 20px;">${topicUser.key.thumbsCount}</span>
                    </div>
                    <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a href="user/getTopicById.do?id=${topicUser.key.id}">${topicUser.key.title}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 <c:if test="${topicUser.key.status == '10'||topicUser.key.status == '11'}">
                                     <span class="top">置顶</span>
                                 </c:if>
                              <c:if test="${topicUser.key.status == '01'||topicUser.key.status == '11'}">
                                  <span class="essence">精华</span>
                              </c:if>
                            </h4>
                        </span>
                    </div>
                    <div class="topic-content" style="padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">
                            ${topicUser.key.content}
                    </div>
                </div>
                <hr>
            </c:forEach>
        </div>

        <div id="topics">
            <c:forEach items="${topicUserMap}" var="topicUser">
            <div class="media-left">
                <a href="#">
                    <img width="60px" class="media-object img-circle picset" src="${topicUser.value.profilePhoto}">
                </a>
            </div>
            <div class="media-body ">
                <div style="color:#C9CDD4; margin-bottom: 10px">
                    <span >${topicUser.value.name}</span>
                    <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
                    <span>发表时间： ${topicUser.key.createTime}</span>
                    <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle" style="vertical-align: auto">${topicUser.key.browseCount}</span>
                    <span style="margin-left: 20px;" class="glyphicon glyphicon-comment">${topicUser.key.commentCount}</span>
                    <span class=" glyphicon glyphicon-thumbs-up" style="margin-left: 20px;">${topicUser.key.thumbsCount}</span>
                </div>
                <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a href="user/getTopicById.do?id=${topicUser.key.id}">${topicUser.key.title}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 <c:if test="${topicUser.key.status == '10'||topicUser.key.status == '11'}">
                                     <span class="top">置顶</span>
                                 </c:if>
                              <c:if test="${topicUser.key.status == '01'||topicUser.key.status == '11'}">
                                  <span class="essence">精华</span>
                              </c:if>
                            </h4>
                        </span>
                </div>
                <div class="topic-content" style="padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">
                    ${topicUser.key.content}
                </div>
            </div>
            <hr>
            </c:forEach>
        </div>
        </div>
        <div>
           <div style="float: right;margin-right: 50px;line-height: 36px;font-size: 14px;" class="pg">
               <span class="count">共${totalCount}条</span>
               <c:if test="${pageNum != 1}">
                <a class="page-next" onclick="pageList(${pageNum-1})">上一页</a>
               </c:if>
               <label class="lable-page">
                   <span title="">每页显示</span>
                   <input onkeydown="if(event.keyCode==13) {pageList(${pageNum});}" class="input-page page-size"
                          title="输入每页显示记录数，按回车跳转" value="${pageSize}">
                   <span title="">条</span>
               </label>

               <label class="lable-page">
                   <input onkeydown="if(event.keyCode==13) {pageList(this.value);}" class="input-page page-num"
                          title="输入页码，按回车跳转" value="${pageNum}" size="2">
                   <span title="共${totalPage}页"> / ${totalPage}页</span>
               </label>
               <c:if test="${pageNum !=totalPage}">
                <a class="page-next" onclick="pageList(${pageNum + 1})">下一页</a>
               </c:if>
           </div>
        </div>
    </div>

</div>

<div class="container content color" style="width: 80%;background-color: #ffffff;margin-top: 10px">
    <form role="form" style="margin-top: 20px;">
    <div class="col-lg-5 form-group" style="height: 20px">
        <input type="text" class="form-control" placeholder="标题" id="topicTitle">
    </div>
    <div class="col-lg-12 form-group" style="margin-top: 10px">
        <div id="editor"></div>
    </div>
    <div class="form-group col-lg-12">
        <div class="col-lg-offset-11 col-lg-1">
            <button type="submit" id="releaseBtn" class="btn btn-default btn-primary">发布</button>
        </div>
    </div>
    </form>
</div>
<div class="modal-footer" style="margin-top: 10px">
    <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
</div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        $("button").click(function (ev) {
            ev.preventDefault();
        })
        $("#releaseBtn").click(function (){
            releaseTopic();
        })
        $(".logoutBtn").click(function (){
           logout();
        })
        created()
    })

    function logout(){
        $.ajax({
            url:"user/logout.do",
            type:"get",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    window.location.href = "login.jsp"
                }else {
                    $.alert("注销失败")
                }
            }
        })
    }

    function pageList(pageNum){
        let pageSize = $.trim($(".page-size").val());
        $.ajax({
            url:"user/pageList.do?",
            type:"post",
            data:{
                "pageNum":pageNum,
                "pageSize":pageSize,
            },
            dataType:"json",
            success:function (){
                window.location.href="main.jsp"
            }
        })
    }
    function created(){
        if(window.name == ""){
            $.ajax({
                url:"user/pageList.do?",
                type:"post",
                data:{
                    "pageNum":${pageNum},
                    "pageSize":${pageSize},
                }
            })
            window.name = "isReload"; // 在首次进入页面时给window.name设置一个固定值
            location.reload();
        }else if(window.name == "isReload"){
            console.log('页面被刷新')
        }
    }


</script>
<style>
    *{
        word-wrap: break-word;
        margin: 0;
        padding: 0;
    }
    label{
        cursor: default;
    }
    .pg a{
        border-radius: 3px;
        padding-bottom: 0px;
        background-color: #F2F3F5;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 0px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: #4E5969;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
    }
    .input-page{
        width: 30px;
        margin-bottom: 3px;
        *margin-bottom: 0px;
        border: #F2F3F5 1px solid;
        position: relative;
        top: -1px;
        text-align: center;
        color: #4E5969;
        height: 20px;
        padding: 4px 3px;
        font-size: 14px;
    }
    .page-next{
        border-radius: 3px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
    }

    .count{
        border-radius: 3px;
        padding-bottom: 0px;
        background-color: #F2F3F5;
        padding-left: 12px;
        padding-right: 12px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: #4E5969;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
        padding-top: 0px;
    }
    .lable-page{
        border-radius: 3px;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #F2F3F5;
        padding-left: 12px;
        padding-right: 12px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: #4E5969;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
    }
    .essence{
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #F76560;
        position: relative;
        top: -1px;
    }
    .top{
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 15px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #57A9FB;
        position: relative;
        top: -1px;
        max-height: 100px;
    }
.topic-content img{
    max-width: 100px !important;
}

</style>
<!-- 引入 css -->
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.create()
    this.editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ]


    //配置多种语言--就是将编辑器原本文字配置成你需要的文字、
    //***链接文字一定要在链接的上面

    function releaseTopic(){
        var topicTitle = $.trim($("#topicTitle").val());
        var topicContent = editor.txt.html();
        if(topicTitle == ""){
            alert("请输入标题");
            return false;
        }
        if(topicContent ==""){
            alert("请输入内容");
            return false;
        }

        $.ajax({
            url:"user/releaseTopic.do",
            data:{
                "topicTitle":topicTitle,
                "topicContent":topicContent
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                   pageList(${pageNum})
                }else{
                    alert("发表失败")
                }
            }
        })
    }

</script>